<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景区领导决策-节假日客流</title>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/page.css">
</head>
<body>
    <div class="box">
        <div class="header head-font">节假日客流</div>
      
        <ul class="content-box">
          <li>
            <h3 class="title tit-font">入园时段客流分析</h3>
            <div class="my-chart" id="myChart7"></div>
          </li>
        </ul>
      </div>
    <script src="../plugin/ECharts/echarts.js"></script>
    <script src="../plugin/jquery-1.11.1.min.js"></script>
    <script>
       function drawLine7 () {
        let data1 = [1652, 2046, 1765, 1934, 2046, 2684, 865]
        let data2 = [1725, 2794, 1546, 2084, 1423, 3465, 1265]
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('myChart7'))
        // 绘制图表
        var option = {
            color: ['#01B2AB', '#E67050'],
            textStyle: {
            fontSize: 12
            },

            grid: {
            left: '-6%',
            right: '6%',
            bottom: '0%',
            top: '30%',
            containLabel: true
            },
            tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                show: true,
                backgroundColor: '#333'
                }
            }
            },
            legend: {
            show: true,
            right: '2%',
            top: '1%',
            textStyle: {
                color: '#999',
                fontSize: 12
            },
            data: ['2019', '2020']
            },
            xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                color: '#999'
            },
            axisLine: {
                show: true,
                lineStyle: {
                color: 'rgba(202,202,204,0.5)'
                }
            },
            data: ['元旦', '春节', '清明节', '端午节', '劳动节', '国庆节', '中秋节']
            }],
            yAxis: [{
            show: false,
            type: 'value',
            axisLine: {
                lineStyle: {
                color: '#666'
                }
            }
            }],
            series: [
            {
                name: '2019年',
                type: 'line',
                symbol: 'circle',
                symbolSize: 4,
                label: {
                normal: {
                    show: true,
                    position: 'top',
                    fontFamily: 'DIN-Medium'
                }
                },
                itemStyle: {
                normal: {
                    areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: 'rgba(247,247,247,0.4)'
                    }, {
                        offset: 1,
                        color: 'rgba(76,255,249,0.4)'
                    }])
                    }
                }
                },
                data: data1
            },
            {
                name: '2020年',
                type: 'line',
                symbol: 'circle',
                symbolSize: 4,
                label: {
                normal: {
                    show: true,
                    position: 'top'
                }
                },
                itemStyle: {
                normal: {
                    areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: 'rgba(255,123,87,0)'
                    }, {
                        offset: 1,
                        color: 'rgba(255,123,87,0.4)'
                    }])
                    }
                }
                },
                data: data2
            }
            ]
        }
        myChart.setOption(option)
    }
    drawLine7()
    </script>
</body>
</html>